<template>
  <div>
    <sb-tip
      >对antdv的弹窗进行了二次封装，简化调用代码，封装loading，统一打开、关闭、确认时的操作。
      <br />不用再上下翻代码文件，全部在一个config中完成
    </sb-tip>
    <a-row>
      <a-col :span="5">
        <sb-btn-r @click="() => $refs.m1.show()">静态内容弹窗</sb-btn-r>
        <sb-modal ref="m1" :config="{ title: '静态内容' }">
          这里是一些静态的文字图片啥的
        </sb-modal>
      </a-col>
      <a-col :span="5">
        <sb-btn-r @click="() => $refs.m2.show()"
          >ajax请求详情弹窗-有延迟</sb-btn-r
        >
        <sb-modal ref="m2" :config="modelDetailConfig">
          {{ zz.NAME }}
          {{ zz.id }}
        </sb-modal>
      </a-col>
    </a-row>
    <sb-tip color="#f00">在同一个弹窗里进行新增和编辑操作</sb-tip>
    <sb-btn-c @click="() => $refs.m3.show()">新增-带表单</sb-btn-c>
    <sb-btn-u style="margin-left: 20px" @click="handleEdit">
      编辑-复用新增的表单
    </sb-btn-u>
    <sb-modal ref="m3" :config="modelAddConfig">
      <a-form
        ref="frm"
        :model="formModel"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-item ref="name" label="Activity name" name="name">
          <a-input v-model:value="formModel.name" />
        </a-form-item>
      </a-form>
    </sb-modal>
    <HighLightHTML :html="html" :js="js" />
  </div>
</template>
<script>
import { SbModal, HighLightHTML } from "~components";
export default {
  components: {
    SbModal,
    HighLightHTML,
  },
  data() {
    return {
      zz: {},
      modelDetailConfig: {
        title: "规格组详情",
        onOpen: this.getDetail,
      },
      //弹窗的表单数据
      formModel: {
        id: 0,
        name: "",
      },
      //弹窗的验证规则
      rules: {
        name: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
      },
      //不用上下翻了，都在这里写
      modelAddConfig: {
        title: "添加分类",
        onOpen: async () => {
          //可以在此初始化数据
          console.log("modal is opened");
          //因为编辑时赋值了id，所以现在就可以判断
          if (this.formModel.id) {
            this.modelAddConfig.title = "编辑分类";
            await new Promise((resolve, reject) => {
              //模拟请求耗时
              setTimeout(() => {
                this.formModel.name = "Simba要开野马";
                resolve();
              }, 1000);
            });
          }
        },
        onClose: () => {
          //清空表单
          this.formModel = this.$options.data.call(this).formModel;
          this.$refs.frm.resetFields();
          console.log("modal is closed");
        },
        onConfirm: async () => {
          await this.$refs.frm.validate();
          await new Promise((resolve, reject) => {
            //模拟请求耗时
            setTimeout(() => {
              if (this.formModel.id) this.$ms("编辑成功");
              else this.$ms("添加成功");
              resolve();
            }, 1000);
          });
        },
      },
    };
  },
  methods: {
    handleEdit() {
      //通常做编辑时，都会有个id
      this.formModel.id = 2021;
      this.$refs.m3.show();
    },
    async getDetail() {
      //正常axios使用
      // let { data } = await this.$post("/goods-category/categoryVoInfo", {
      //   id: "6b33b59461fb1beb4232de9d064122c3",
      // });
      // this.zz = data;

      //-----------------------------------------------

      //演示
      await new Promise((resolve, reject) => {
        //模拟请求耗时
        setTimeout(() => {
          this.zz = {
            NAME: "模拟数据" + Math.random(),
            id: +new Date(),
          };
          resolve();
        }, 1000);
      });
    },
  },
  computed: {
    html() {
      return `
    <sb-btn-c @click="() => $refs.m3.show()">新增-带表单</sb-btn-c>
    <sb-btn-u @click="handleEdit"> 编辑-复用新增的表单 </sb-btn-u>

    <sb-modal ref="m3" :config="modelAddConfig">
      <a-form ref="frm" :model="formModel" :rules="rules">
        <a-form-item ref="name" label="Activity name" name="name">
          <a-input v-model:value="formModel.name" />
        </a-form-item>
      </a-form>
    </sb-modal>
    `;
    },
    js() {
      return `
      data(){
        return {
          //...其他略
          //不用上下翻了，都在这里写
          modelAddConfig: {
            title: "添加分类",
            onOpen: async () => { //在这里可以通过id判断是否是编辑状态 },
            onClose: () => {//也许你希望关闭后清空表单啥的，就在这里做吧},
            onConfirm: async () => {//不用考虑loading了,帮你在内部做好了},
          },
        }
      },
      methods: {
        handleEdit() {
          this.formModel.id = 2021;//通常做编辑时，都会有个id
          this.$refs.m3.show();
        },
      }
      `;
    },
  },
};
</script>

<style scoped lang='scss'>
</style>